<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in images" :key="item.id">
    <img v-lazy="item.img_url" />
  </van-swipe-item>
</van-swipe>
<!-- <van-grid>
  <van-grid-item text="NBA" >
        <van-image src="https://search-operate.cdn.bcebos.com/8e4afe1c2bf65156b69d5f65300c038d.png" />
  </van-grid-item>
    <van-grid-item text="北京冬奥会" >
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  </van-grid-item>
    <van-grid-item text="国际足球" >
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  </van-grid-item>
    <van-grid-item text="中国足球" >
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  </van-grid-item>
</van-grid> -->
  </div>   
</template>

<script>
export default {
   data(){
       return {
           images:[]
       }
   },
   methods:{
       getSwiperImages(){
           this.$http.get('/api/swiperImg').then(res=>{
            //    console.log(res);
            if(res.status == 200){
             this.images = res.data
            }
           })
       }
   },
   created(){
       this.getSwiperImages()
   }
}
</script>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 5rem;
    img {
        display: block;
        width: 100%;
        height: auto;
    }
  }
</style>